<template>
  <div class="app-container">
    <header>
      <p class="title">WHY CHOOSE US</p>
    </header>
    <main>
      <li>
        <div class="image">
          <img src="@/assets/image/choose1_hover.png" alt="" />
        </div>
        <p class="name">Fast Delivery</p>
        <p class="text">
          First-class work efficiency and sufficient inventory allow us to
          complete the delivery for you in a very short time, and will never let
          every customer who trusts us wait for a long time!
        </p>
      </li>
      <li>
        <div class="image">
          <img src="@/assets/image/choose2_hover.png" alt="" />
        </div>
        <p class="name">Saving Money</p>
        <p class="text">
          The price of any in-game products or services on sale is set after
          professional market research to give you the greatest discount, so
          that you can get the most products with the least money.
        </p>
      </li>
      <li>
        <div class="image">
          <img src="@/assets/image/choose3_hover.png" alt="" />
        </div>
        <p class="name">24/7 Service</p>
        <p class="text">
          The professional human customer service team that is online 24/7 is
          always waiting to answer your questions or solve the problems you
          encounter.
        </p>
      </li>
      <li>
        <div class="image">
          <img src="@/assets/image/choose4_hover.png" alt="" />
        </div>
        <p class="name">95% Satisfaction</p>
        <p class="text">
          Thousands of customers have expressed high praise for every aspect of
          MMOAH after buying what they need here. The full range of services we
          provide impresses every customer and makes them want to shop here
          again.
        </p>
      </li>
    </main>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 60px;
  header {
    margin-bottom: 40px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(@/assets/image/index_title_04.png);
    background-size: 100%;
    .title {
      transform: translate(0, 10px);
      font-size: 60px;
      text-align: center;
      color: #bdbcbf;
    }
  }
  main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    li {
      padding: 80px 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #191919;
      cursor: pointer;
      .image {
        width: 117px;
        height: 147px;
      }
      .name {
        margin: 30px 0;
        font-size: 32px;
        font-weight: 700;
        text-align: center;
        color: #fff;
      }
      .text {
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        color: #b4b7b7;
      }
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 10px;
        background: #909894;
        transition: all 0.5s;
      }
      &:hover {
        background: #333030;
        &::after {
          width: 100%;
        }
      }
    }
  }
}
</style>